/**
 * 该文件是在柚客项目中使用的
 */
import React from 'react'
import {Input, Row, Col, InputNumber, Select, DatePicker, Form} from 'antd'
import './cms.less'
const FormItem = Form.Item;

//高级搜索的表单中的下拉多选字段(用于选项多于3个时)
class SelectGroup extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      name: props.name,
      label: props.label,
      //options: props.options,
      multiple: props.multiple || false,
      handle: props.handle,
      val: []
    };
    this.changeHandle = this.changeHandle.bind(this);
    this.reset = this.reset.bind(this);
  }

  changeHandle (value) {
    this.setState({val: value});
    let tmp = {}
    if (this.state.multiple) {
      tmp = {
        in: value
      }
    } else {
      tmp = {in: new Array(value)};
    }
    this.state.handle(this.state.name, tmp);
  }

  reset () {
    this.setState({val: []});
    this.state.handle(this.state.name, []);
  }

  render () {
    var {options} = this.props;//.options;
    let idVal = 'area' + Math.random();
    /*if(this.props.options.length>0)
     options = this.props.options;*/

    return (
      <div style={{position: 'relative'}} id={idVal}>
        <label className="uk_label">{this.state.label}:</label>
        <Row className="uk_mgb_24">
          <Col span={24}>
            <Select
              multiple={this.state.multiple}
              name={this.state.name}
              style={{width: '100%'}}
              value={this.state.val}
              placeholder={this.state.label}
              onChange={this.changeHandle}
              getPopupContainer={() => document.getElementById(idVal)}
            >
              {options.map(function (item, key) {
                return <Select.Option key={key + ''} value={item.value + ''}>{item.text}</Select.Option>
              })}
            </Select>
          </Col>
        </Row>
      </div>
    );
  }
}
//高级搜索的表单中的文本字段
class TextInput extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      name: props.name,
      label: props.label,
      text: props.text,
      handle: props.handle,
      val: ''
    };
    this.changeHandle = this.changeHandle.bind(this);
    this.reset = this.reset.bind(this);
  }

  changeHandle (e) {
    this.setState({val: e.target.value});
    this.state.handle(this.state.name, {like: e.target.value});
  }

  reset () {
    this.setState({val: ''});
    this.state.handle(this.state.name, {like: ''});
  }

  render () {
    return <div>
      <label className="uk_label">{this.state.label}:</label>
      <Row className="uk_mgb_24">
        <Col span={24}>
          <Input name={this.state.name} value={this.state.val} placeholder={this.state.text}
                 onChange={this.changeHandle}/>
        </Col>
      </Row>
    </div>
  }
}
//高级搜索的表单中的日期类型字段(之前、之后、当前)
class DateCompare extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      name: props.name,
      label: props.label,
      options: props.options,
      handle: props.handle,
      optData: {
        gt: null,
        lt: null,
        eq: null
      },
      val: {
        gt: '',
        lt: '',
        eq: ''
      }
    };
    this.gtChange = this.gtChange.bind(this);
    this.ltChange = this.ltChange.bind(this);
    this.eqChange = this.eqChange.bind(this);
    this.reset = this.reset.bind(this);
  }

  gtChange (date, dateString) {
    var optData = this.state.optData;
    optData.eq = null;
    optData.gt = date;

    var val = this.state.val;
    val.eq = '';
    val.gt = dateString || '';

    this.setState({optData: optData, val: val});
    this.state.handle(this.state.name, val);
  }

  ltChange (date, dateString) {
    var optData = this.state.optData;
    optData.eq = null;
    optData.lt = date;


    var val = this.state.val;
    val.eq = '';
    val.lt = dateString || '';
    this.setState({optData: optData, val: val});
    this.state.handle(this.state.name, val);
  }

  eqChange (date, dateString) {
    var optData = this.state.optData;
    optData.eq = date;
    optData.lt = null;
    optData.gt = null;

    var val = this.state.val;
    val.eq = dateString || '';
    val.lt = '';
    val.gt = '';
    this.setState({optData: optData, val: val});
    this.state.handle(this.state.name, val);
  }

  reset () {
    var optData = this.state.optData;
    optData.eq = null;
    optData.lt = null;
    optData.gt = null;

    var val = this.state.val;
    val.eq = '';
    val.lt = '';
    val.gt = '';
    this.setState({optData: optData, val: val});
    this.state.handle(this.state.name, val);
  }

  render () {
    var optData = this.state.optData;
    var options = this.state.options;
    return (
      <div>
        <label className="uk_label">{this.state.label}:</label>
        <Row>
          <Col span={8}>
            <FormItem wrapperCol={{span: 24}} style={{marginBottom: '5px'}}>
              <DatePicker onChange={this.gtChange} value={optData.gt} placeholder={options[1].text} size={'small'}/>
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem wrapperCol={{span: 24}} style={{marginBottom: '5px'}}>
              <DatePicker onChange={this.ltChange} value={optData.lt} placeholder={options[0].text} size={'small'}/>
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem wrapperCol={{span: 24}} style={{marginBottom: '5px'}}>
              <DatePicker onChange={this.eqChange} value={optData.eq} placeholder={options[2].text} size={'small'}/>
            </FormItem>
          </Col>
        </Row>
      </div>
    );
  }
}

export default {
  SelectGroup,
  DateCompare,
  TextInput,
}
